<template>
  <div>
    <p>1. template, 里只能有一个节点</p>
    <p>2. data 是一个函数, return 一个对象, vue是组件化开发, 这个组件可能被多处使用,如果data是一个引用对象(装了数据),那么多个组件会共用数据对象. 所以使用return 返回一个新对象的方式, 来让各各组件的数据保持私有(数据是独立的)
    </p>
    <p>
      普通渲染(插值表达式): {{msg}}
    </p>
    <div>
      把变量赋值到标签的属性中
      src, href, title,
    <h1 title='msg'>这是标题</h1>

    <h1 :title='msg'>这是标题</h1>
    <h1 v-bind:title='msg'>这是标题</h1>
    </div>
    <p>
      <span v-if='age>18'>如果没有大于18岁,不能看电影</span>
      <span
        v-else
        class="red"
      >如果没有大于18岁,不能看电影</span>
      <br>
      <span :class="{red:age<18}">如果没有大于18岁,不能看电影</span>
    </p>
    <div>
      绑定事件: 触发的事件方法, 必须写在methods里
      <br>
      handler不带括号, 那么表示可以接受任意参数, 一般不带括号
    <div v-on:click="handler">可以点击</div>
    <div @click="handler">可以点击</div>
    有一个组件, 当组件内发生变化时, 需要通知父组件的时候, 就会调用父组件的方法(可以传任意值)
    </div>
    <p>
      计算属性:
      姓名是:{{first_name}} {{last_name}}
      <br>
      姓名是: {{full_name}}
    </p>
    <div>
      filters:
    <div>{{get_desc(age)}}</div>
    <div>{{age|age_desc}}</div>
    </div>
    <p>
      watch:

    </p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      msg: '信息',
      age: 10,
      first_name: 'zhang',
      last_name: 'san'
    }
  },
  // data:{
  // },
  mounted(){
    // 当页面挂载/ 渲染/ 展示/ 
    // 初始化页面数据
    // 根据页面的数据, 调接口
    // alert('mounted')
  },
  computed: {
    full_name() {
      return this.first_name + ' ' + this.last_name
    },
  },
  methods: {
    get_desc(age) {
      if (age < 12) {
        return '儿童'
      }
      else if (age < 18) {
        return '少年'
      }
      else if (age < 30) {
        return '青年'
      }
      else {
        return '中年'
      }
    },
    handler(a, b, c) {
      alert('点击了')
      this.age = 20 // 改变age后,  文字的颜色就变了
    }
  },
  filters: {
    age_desc(value) {
      if (value < 12) {
        return '儿童'
      }
      else if (value < 18) {
        return '少年'
      }
      else if (value < 30) {
        return '青年'
      }
      else {
        return '中年'
      }
    }
  },
  watch: {
    age(new_v, old_v) {
      // 变化前后, old_v  ->  new_v
      this.msg = '年龄变化了, 从'+old_v+'岁, 变化到了'+new_v+'岁'
    }
  }
}
</script>
<style scoped>
.red {
  color: red;
}
</style>